<template>
	<view class="content">
		<view :class="isH5">
			<uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></uni-segmented-control>
		</view>
		<view class="content1">
			<view v-show="current === 0">
				<navigator :url="'../baoxiuxingqing/baoxiuxingqing?id=' + val.id" v-for="val in listArr" :key="val.id">
					<view class="uni-card">
						<view class="uni-card-header">
							<text class="uni-ellipsis">{{ val.bxContent }}</text>
						</view>
						<view class="uni-card-content">
							<view class="sj">{{ val.createTime }}</view>
							<view class="zt">{{ val.bxStatus }}</view>
						</view>
					</view>
				</navigator>
			</view>
			<view v-show="current === 1">
				<navigator :url="'../baoxiuxingqing/baoxiuxingqing?id=' + val.id" v-for="val in listArr" :key="val.id">
					<view class="uni-card">
						<view class="uni-card-header">
							<text class="uni-ellipsis">{{ val.bxContent }}</text>
						</view>
						<view class="uni-card-content">
							<view class="sj">{{ val.createTime }}</view>
							<view class="zt">{{ val.bxStatus }}</view>
						</view>
					</view>
				</navigator>
			</view>
			<view v-show="current === 2">
				<navigator :url="'../baoxiuxingqing/baoxiuxingqing?id=' + val.id" v-for="val in listArr" :key="val.id">
					<view class="uni-card">
						<view class="uni-card-header">
							<text class="uni-ellipsis">{{ val.bxContent }}</text>
						</view>
						<view class="uni-card-content">
							<view class="sj">{{ val.createTime }}</view>
							<view class="zt">{{ val.bxStatus }}</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { formatTimeToStr } from '@/components/date.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
export default {
	components: {
		uniSegmentedControl,
		uniLoadMore
	},
	computed: {
		...mapState(['TOKEN','UPDATE', 'URL'])
	},
	data() {
		return {
			isH5: 'uni-padding-wrap uni-common-mt tab',
			//#ifdef H5
			isH5: 'uni-padding-wrap uni-common-mt tab h5',
			//#endif
			status: 'more',
			listArr: [],
			items: ['全部', '已评价', '未评价'],
			current: 0,
			styleType: 'button',
			activeColor: '#007aff',
			type: Number
		};
	},
	onLoad() {
		this.getList();
	},
	onShow: function() {
		if (this.UPDATE) {
			this.getList();
			this.TO_UPDATE(false);
		}
	},
	onReachBottom() {
		this.status = 'loading';
		this.getList();
	},
	onPullDownRefresh() {
		console.log(111);
		if (this.isXiaLa) {
			this.isXiaLa = false;
			this.isLa = true;
			this.isMore = 'more';
			this.reqData = {
				page: 0,
				rows: 20
			};
			this.listArr = [];
			this.getList();
		} else {
			// uni.showToast({
			// 	icon: 'none',
			// 	title: '下拉太过频繁'
			// });
			uni.stopPullDownRefresh();
		}
	},
	methods: {
		...mapMutations(['SIGN_OUT', 'TO_UPDATE']),
		onClickItem(index) {
			if (this.current !== index) {
				this.current = index;
				// console.log(this.current);
				this.getList();
			}
		},
		getList() {
			console.log(111111);
			// console.log(this.current);
			if (this.TOKEN) {
				uni.request({
					url: this.URL + 'bx/getMyBxList',
					header: {
						token: this.TOKEN
					},
					data: {
						type: this.current
					},
					success: e => {
						uni.stopPullDownRefresh();
						setTimeout(() => {
							this.isXiaLa = true;
						}, 3000);
						console.log(e.data);
						// console.log(JSON.stringify(e.data));
						if (e.data.message === 'Token无效.') {
							uni.showModal({
								title: '用户信息过期'
							});
							this.SIGN_OUT();
							setTimeout(() => {
								uni.navigateBack();
							}, 4000);
							return;
						}
						if (e.data.data.length < 100) {
							this.status = 'noMore';
						}
						this.listArr = e.data.data;
						for (var i = 0; i < this.listArr.length; i++) {
							this.listArr[i].createTime = formatTimeToStr(this.listArr[i].createTime, 'yyyy-MM-dd');
						}
					}
				});
			}
		}
	}
};
</script>

<style>
.tab {
	position: fixed;
	z-index: 99;
	top: 0px;
	background: white;
	width: 100%;
	left: 0;
	padding: 2px 0px;
	margin-top: 0upx;
}
.content1 {
	margin-top: 25px;
}
.uni-card {
	margin-bottom: 20upx;
	width: 680upx;
	padding: 15upx;
	background: #ffffff;
	border-radius: 20upx;
	box-shadow: 2upx 2upx 5upx #c8c7cc;
}
.uni-card-header {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 60upx;
}
.uni-card-content {
	display: flex;
	justify-content: space-between;
	color: #c8c7cc;
	font-size: 30upx;
	line-height: 40upx;
}
.h5 {
	left: 0px;
	top: 44px;
	position: fixed;
	z-index: 99;
	background: white;
	padding: 3px 0px;
	width: 100%;
}
</style>
